<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>statistic_information</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
    .mytable{
        border: black solid 1px;
    }
    .mytable th{
        border: black solid 1px;
        text-align: center;

    }
    .mytable tr{
        border: black solid 1px;
        height: 20px;
    }
    ul.pagination {
        display: inline-block;
        padding: 0;
        margin: 0;
    }

    ul.pagination li {display: inline;}

    ul.pagination li a {
        color: black;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
    }
    ul.pagination li a.active {
        background-color: #4CAF50;
        color: white;
    }
    ul.pagination li a:hover:not(.active) {background-color: #ddd;}
    #input input{ height: 20px;margin-top: 10px}
</style>
<body>
    <div id="nav">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="welcome.jsp">首页<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link " href="signal_analysis.html">数据分析</a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link " href="model_construct_AlexNet.html">模型构建与下载</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="statistic_information.html">统计信息<span class="sr-only">(current)</span></a>
                    </li>
                </ul>
                <h5 style="height: 10px;" align="right"><a id="username" class="user"></a> &nbsp;</h5>
            </div>
        </nav>
    </div>

    <div style="width: 100%;height: 500px;float: left;margin-top: 10px">
        <div style="width: 40%;float: left;height: 500px">
            <h2 style="text-align: center">待处理的报警事务</h2>
            <ul>
                <li>一级</li>
                <li>二级</li>
                <li>三级</li>
            </ul>

        </div>
        <div style="width: 60%;height:500px;float: left">

            <h2 style="text-align: center">历史报警统计信息查询</h2>
            <div style="margin-bottom: 10px" id="input">
                车次：<input id="input_train_number" type="text" style="width: 50px" onchange="getTrainBearInfo()"/>
                &nbsp;车辆号：<input id="input_cycle_number" type="number" style="width: 70px" onchange="getTrainBearInfo()"/>
                &nbsp;转向架号：<input id="input_bogie_number" type="number" style="width: 30px" onchange="getTrainBearInfo()"/>
                &nbsp;轴承：<input id="input_bear_number" type="number" style="width: 30px" onchange="getTrainBearInfo()"/>
                &nbsp;轴温：<select id="input_tem" onchange="getTrainBearInfo()">
                                <option value="0"></option>
                                <option value="1">报警</option>
                                <option value="2">正常</option>
                            </select>
                &nbsp;振动：<select id="input_vib" onchange="getTrainBearInfo()">
                                <option value="0"></option>
                                <option value="1">报警</option>
                                <option value="2">正常</option>
                            </select></br>
                时间：<input type="date" id="time_from" >&nbsp;-&nbsp;<input type="date" id="time_to">

            </div>
            <div style="height: 80%;overflow: auto;">
                <table id="show_table" class="mytable" width="100%" >
                    <tr>
                        <th>车次</th>
                        <th>车辆号</th>
                        <th>转向架</th>
                        <th>轴承</th>
                        <th>振动</th>
                        <th>轴温</th>
                    </tr>
                </table>
            </div>

            <div>
                <div style="width:30%;float: left;margin-top: 25px;text-align: center">
                    每页
                    <select style="width: 50px;margin-top: 20px" id="itemsPerPage" onchange="setItemsPerPag()">
                        <option value="10">10</option>
                        <option value="15">15</option>
                        <option value="20">20</option>
                        <option value="25">25</option>
                        <option value="30">30</option>
                    </select>
                    条数据
                </div>
                <div style="width:40%;margin-top: 25px;float: left;" align="center">
                    <ul class="pagination" id="indexPage">
                        <li><a >«</a></li>
                        <li><a class="active">1</a></li>
                        <li><a>»</a></li>
                    </ul>
                </div>
                <div style="width:30%;margin-top: 35px;float: left;">
                    <p id="sumNumberOfSignal">共0条数据,0页</p>
                </div>
            </div>
        </div>
    </div>

    <div style="width: 100%;margin-top: 100px;float: left">
        <p style="text-align: center">Copyright</p>
    </div>

</body>
    <script src="../resource/js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../resource/js/jquery.js"></script>
    <script type="text/javascript" src="../resource/js/colResizable-1.6.min.js"></script>
    <script type="text/javascript">
        window.onload = function (ev) {
            var user = document.getElementById("username");
            var xhr = new XMLHttpRequest();
            xhr.open("POST","../GetUserName",true);
            xhr.send();
            xhr.onreadystatechange = function (ev1) {
                if(xhr.readyState==4&&xhr.status==200)
                {
                    var content = xhr.responseText;
                    if(content=="no,relogin")
                    {
                        user.innerText = "请重新登录";
                        user.href = "login.jsp";
                    }
                    else
                    {
                        user.innerText = content;
                        user.href = "user.html";
                    }
                }
            }

        };

        var TrainBearInfo=null ;
        var itemsPerPage = 10;
        function setItemsPerPag() {
            var items = document.getElementById("itemsPerPage");
            var sumNumber = document.getElementById("sumNumberOfSignal");
            itemsPerPage = items.value;
            sumNumber.innerText = "共"+TrainBearInfo.length+"条数据，共"+Math.ceil(TrainBearInfo.length/itemsPerPage)+"页";
            setPageIndex_show(1);
            setSignalTable(1);

        }
        function getTrainBearInfo() {
            var sumNumber = document.getElementById("sumNumberOfSignal");
            var TrainNumber = document.getElementById("input_train_number");
            var VehicleNumber = document.getElementById("input_cycle_number");
            var Bogie = document.getElementById("input_bogie_number");
            var Axle = document.getElementById("input_bear_number");
            var Tem = document.getElementById("input_tem");
            var Vib = document.getElementById("input_vib");
            var formdata = new FormData();
            formdata.append("TrainNumber",TrainNumber.value);
            formdata.append("VehicleNumber",VehicleNumber.value);
            formdata.append("Bogie",Bogie.value);
            formdata.append("Axle",Axle.value);
            formdata.append("Tem",Tem.value);
            formdata.append("Vib",Vib.value);
            var xhr = new XMLHttpRequest();
            xhr.open("POST","../QueryBearInfo",true);
            xhr.send(formdata);
            xhr.onreadystatechange = function (ev) {
                if(xhr.readyState==4&&xhr.status==200)
                {
                    var content = xhr.responseText;
                    var str = JSON.parse(content);
                    TrainBearInfo = str;
                    sumNumber.innerText = "共"+TrainBearInfo.length+"条数据，共"+Math.ceil(TrainBearInfo.length/itemsPerPage)+"页";
                    setPageIndex_show(1);
                    setSignalTable(1);
                }
            };
        }
        var activeIndex = 1;
        function setPageIndex(x)
        {
            if(x==-1)
            {
                if(activeIndex!=1)//首页，不减
                {
                    activeIndex = activeIndex - 1;
                }
            }
            if(x==-2)
            {
                if(activeIndex!=Math.ceil(TrainBearInfo.length/itemsPerPage))//末页，不加
                {
                    activeIndex = activeIndex + 1;
                }

            }
            if(x!=-1&&x!=-2)
            {
                activeIndex = x;
            }
            setPageIndex_show(activeIndex);
            setSignalTable(activeIndex);
        }
        function setPageIndex_show(x) {
            var indexPage = document.getElementById("indexPage");
            var str="";
            var length = TrainBearInfo.length;
            var pageNum = Math.ceil(TrainBearInfo.length/itemsPerPage);
            str += "<li onclick='setPageIndex(-1)'><a >«</a></li>";
            for(var i=1;i<=pageNum;i++)
            {
                if(i!=x)
                {
                    str+="<li onclick='setPageIndex("+i+")'><a >"+i+"</a><li>";
                }
                else
                {
                    str+="<li onclick='setPageIndex("+i+")'><a class='active'>"+i+"</a><li>";
                }

            }
            str += "<li onclick='setPageIndex(-2)'><a>»</a></li>";
            indexPage.innerHTML = str;
        }

        function setSignalTable(x)
        {
            var table = document.getElementById("show_table");
            var str="<tr><th>车次</th><th>车辆号</th>" +
                "<th>转向架</th><th>轴承</th><th>振动</th><th>轴温</th></tr>";
            var start= (x-1)*itemsPerPage;
            var end=x*itemsPerPage;
            var i = start;
            var length = TrainBearInfo.length;
            for(;i<end&&(i<length);i++)
            {
                str+="<tr> <th>"+TrainBearInfo[i].trainNumber
                    +"</th><th>"+TrainBearInfo[i].vehicleNumber
                    + "</th><th>"+TrainBearInfo[i].bogie
                    +"</th><th>"+TrainBearInfo[i].axle
                    + "</th><th>"
                    + "</th></tr>";
            }
            table.innerHTML = str;

        }
        $(function(){
            $("table").colResizable();
        });

    </script>

</html>